<template>
	<view class="goods_info_page">
		<view class="goods_images">
			<swiper style="height: 700rpx;background: #eee;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(v,k) in goodsInfo.goods_images" :key="k">
					<view class="swiper-item"><image :src="v||''" mode="aspectFill"></image></view>
				</swiper-item>
			</swiper>
			<view class="left_icon" @click="$nav('',3)"><uni-icons color="#fff" size="20" type="arrowleft"></uni-icons></view>
			<view class="right_icon"><text class="qwicon qwfenxiang" @click="share"></text></view>
			<view @click="favClick()" :class="isFav?'right_icon sec':'right_icon sec ck'">{{isFav?'已':'+ '}}收藏</view>
		</view>
		
		<view class="goods_title">
			<view class="goods_name">{{goodsInfo.goods_name||'加载中...'}}</view>
			<view class="goods_desc">{{goodsInfo.goods_subname||'加载中...'}}</view>
			<view class="goods_price">
				<text class="price">￥{{goodsInfo['goods_price']||'0.00'}}</text>
				<text class="market_price">￥{{goodsInfo['goods_market_price']||'0.00'}}</text>
				<text class="tip" v-if="goodsInfo.seckills">秒杀</text>
			</view>
			<view class="stock_num">
				<text class="sale">销量：{{goodsInfo.goods_sale||'0'}}</text>
				<text class="sale">库存：{{goodsInfo.goods_stock||'0'}}</text>
				<text class="sale">收藏：{{goodsInfo.goods_collect||'0'}}</text>
			</view>
		</view>
		
		<!-- 属性旋转 -->
		<view class="tuan_list" v-if="collectives && collective_list.length>0">
			<uni-list :border="false">
				<uni-list-item @click="toggleSpec()" clickable :title="'正在拼团'"  :showArrow="true"></uni-list-item>
			</uni-list>
			<swiper style="background: #fff;border-top: 1px solid #efefef;height: 90rpx;" :vertical="true" :autoplay="true">
				<swiper-item v-for="(v,k) in collective_list" :key="k">
						<view class="tuan_item" >
							<image :src="v.avatar||require('@/static/auth/default_avatars.png')" />
							<view class="nickname">{{v.nickname}}(团购价￥ {{goodsInfo.goods_price*(1-collectives.discount/100)||'0.00'}})</view>
							<view class="btn" @click="collective_id=v.id;buy()">参团</view>
							<view class="orders_count">参团 {{v.orders_count}} / {{v.need}} 人</view>
						</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 属性旋转 -->
		<view class="info_attr">
			<uni-list :border="false">
				<uni-list-item @click="toggleMask('show')" clickable :showArrow="true" v-if="coupons.length>0">
					<template slot="header">
						<text class="yhqicon">券</text>
						<text class="yhq">优惠券</text>
					</template>
					<template slot="footer">
						<text style="font-size: 24rpx;color:#999;">{{coupons.length>0?'点击领取':'暂无'}}</text>
					</template>
				</uni-list-item>
				<uni-list-item @click="toggleSpec()" clickable title="规格属性" :rightText="(skuIndex>-1?goodsInfo['skuList'][skuIndex]['sku_name'].join(' '):'')+' 数量：'+buy_num " :showArrow="true"></uni-list-item>
			</uni-list>
		</view>
		
		<!-- 评价 -->
		<view class="comment">
			<uni-list :border="false">
				<uni-list-item @click="$nav('/pages/goods/comment?id='+goods_id)"  :title="'商品评价 ( '+(comment_statistics.all||'0')+' )'" clickable :rightText="'好评率 ('+(comment_statistics.rate||'100')+'%)'" :showArrow="true"></uni-list-item>
			</uni-list>
			<view class="comment_content" v-if="comments.length>0" v-for="(v,k) in comments" :key="k">
				<view class="avatar"><image :src="v.user.avatar||'../../static/auth/default_avatars.png'" mode="aspectFit" /></view>
				<view class="comment_info">
					<view class="nickname">{{v.user.nickname}}</view>
					<view class="desc">{{v.content}}</view>
					<view class="img" v-if="v.image.length>0">
						<image v-for="(val,index) in v.image" :key="index" :src="val" mode="aspectFit" />
					</view>
					<view class="other">{{v.created_at||'0000-00-00 00:00'}}</view>
				</view>
			</view>
		</view>
		
		<!-- 详情 -->
		<view class="content">
			<view class="c_title">图文详情</view>
			<view class="m_content" v-html="goodsInfo.goods_content_mobile"></view>
		</view>
		
		<!-- 购物漂浮 -->
		<uni-goods-nav class="goods_nav"   :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		
		<!-- 规格-模态层弹窗 :class="specClass" -->
		<view 
			class="popup spec" 
			:class="specClass"
			@click="toggleSpec"
		>
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer attr-content" @click.stop="stopPrevent">
				<view class="a-t">
					<image :src="goodsInfo.goods_images_thumb_150?(goodsInfo.goods_images_thumb_150[0]||''):''"></image>
					<view class="right">
						<text class="price">¥{{goodsInfo['goods_price']||'0.00'}}</text>
						<text class="stock">库存：{{goodsInfo['goods_stock']||'0'}}件</text>
						<view class="selected">
							已选：
							<text class="selected-text">
								{{(skuIndex>-1?goodsInfo['skuList'][skuIndex]['sku_name'].join(' '):' -')}}
							</text>
						</view>
					</view>
				</view>
				<view v-for="(item,index) in goodsInfo.attrList" :key="index" class="attr-list">
					<text>{{item.name||'-'}}</text>
					<view class="item-list">
						<text 
							v-for="(childItem, childIndex) in item.specs" 
							:key="childIndex" class="tit"
							:class="{selected: !($isEmpty(childItem.is_chose) || childItem.is_chose==false)}"
							@click="attrClick(index, childIndex)"
						>
							{{childItem.name||'-'}}
						</text>
					</view>
				</view>
				<!-- 数量 -->
				<view class="attr-list">
					<text style="margin-bottom: 20rpx;">购买数量</text>
					<uni-number-box @change="buyNumChange" :min="1"></uni-number-box>
				</view>
				<button class="btn" @click="choseCom">完成</button>
			</view>
		</view>
		
		<!-- 优惠券面板 -->
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content" @click.stop.prevent="stopPrevent">
				<!-- 优惠券页面，仿mt -->
				<view class="coupon-item" v-for="(item,index) in coupons" :key="index" @click="coupons_receive(item.id)">
					<view class="con">
						<view class="left">
							<text class="title">{{item.name}}</text>
							<text class="time"><text v-if="item.use_money>0">满{{item.use_money}}可用</text></text>
						</view>
						<view class="right">
							<text class="price">{{item.money}}</text>
						</view>
						
						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<text class="tips">{{item.content||'-'}}</text>
				</view>
			</view>
		</view>
		
		<!-- 分享 -->
		<uni-popup ref="popup" type="share">
		    <uni-popup-share title="分享到" @select="select"></uni-popup-share>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopupShare from "@/components/uni-popup/uni-popup-share.vue"
	export default {
		components:{uniPopupShare},
		data () {
		  return {
			specClass: 'none',
			options: [{
				icon: 'headphones',
				text: '客服'
			}, {
				icon: 'shop',
				text: '店铺',
			}, {
				icon: 'cart',
				text: '购物车',
				info: 0
			}],
			buttonGroup: [{
			  text: '加入购物车',
			  backgroundColor: '#ff0000',
			  color: '#fff'
			},
			{
			  text: '立即购买',
			  backgroundColor: '#ffa200',
			  color: '#fff'
			}
			],
			maskState: 0, //优惠券面板显示状态
			goods_id:0,
			isFav:false,
			goodsInfo:{},
			chose_spec:[],
			sku_id:0,
			buy_num:1,
			skuIndex:-1,
			collective_id:0,
			comment_statistics:{},
			comments:[],
			coupons:[],
			collectives:false,
			collective_list:[],
			buyButton:0,
		  }
		},
		onLoad(opt) {
			if(this.$isEmpty(opt.id)){
				return this.$toast('商品不存在')
				// return this.$nav('',3);
			}
			this.goods_id = opt.id;
			this.get_info(opt.id);
			this.is_fav();
			this.goods_comment_statistics(opt.id);
			this.goods_comments(opt.id);
			this.cart_count();
			
		},
		methods:{
			get_info(id){
				let goodsInfoUrl = this.$api.goodsInfo.url;
				this.$api.goodsInfo.url += '/'+id
				this.$http(this.$api.goodsInfo).then(res=>{
					if(res.code == 200){
						this.goodsInfo = res.data;
						if(this.goodsInfo['skuList'] && this.goodsInfo['skuList'].length>0){
							this.skuIndex = 0;
							this.change_goods_info(this.goodsInfo['skuList'][this.skuIndex])
						}
						this.coupons = res.data.coupons
						this.collectives = res.data.collectives; // 拼团
						this.collective_list = res.data.collective_list; // 拼团
						
						if(this.collectives){
							this.buttonGroup[0].text = '直接购买'
							this.buttonGroup[1].text = '参加拼团'
							this.buttonGroup[1].backgroundColor = '#67c23a'
						}
					}else{
						this.$toast(res.msg);
						// return this.$nav('',3);
					}
					this.$api.goodsInfo.url = goodsInfoUrl
				})
			},
			// 获取评论统计
			goods_comment_statistics(id){
				let goodsInfoUrl = this.$api.goodsCommentStatistics.url;
				this.$api.goodsCommentStatistics.url += '/'+id
				this.$http(this.$api.goodsCommentStatistics).then(res=>{
					this.comment_statistics = res.data;
				})
				this.$api.goodsCommentStatistics.url = goodsInfoUrl
			},
			// 获取评论
			goods_comments(id){
				let goodsInfoUrl = this.$api.goodsComments.url;
				this.$api.goodsComments.url += '/'+id+'?per_page=3'
				this.$http(this.$api.goodsComments).then(res=>{
					this.comments = res.data.data;
				})
				this.$api.goodsComments.url = goodsInfoUrl
			},
			// 购买数量做修改
			buyNumChange(e){
				this.buy_num = e;
			},
			// 属性被选择点击
			attrClick(e,index){
				this.goodsInfo.attrList[e]['specs'].forEach((res,key)=>{
					res.is_chose = false;
					if(key == index){
						res.is_chose = true;
					}
				});
				this.buy_num = 1;
	
				// 循环获取选择的规格属性
				let chose_spec = [];
				this.goodsInfo.attrList.forEach(res=>{
					res['specs'].forEach(listRes=>{
						if(!this.$isEmpty(listRes.is_chose) && listRes.is_chose == true){
							chose_spec.push(listRes.id);
						}
					});
				});
				
				this.chose_spec = chose_spec;
				
				// 如果选择数量和规格数量一致则表示选择完所有的规格属性
				if(this.chose_spec.length == this.goodsInfo.attrList.length){
					this.get_spec_attr_data();
				}
	
				this.$forceUpdate();
			},
			// 根据选择的规格属性去获取数据库存在的规格数据
			get_spec_attr_data(){
				this.goodsInfo.skuList.forEach((res,index)=>{
					let a = 0;
					this.chose_spec.forEach(specRes=>{
						res.spec_id.forEach(itm=>{
							if(itm == specRes){
								 a += 1;
							}
						})
					});
					if(a == this.goodsInfo.attrList.length){
						this.chose_spec_info = res;
						this.sku_id = res.id;
						this.skuIndex = index;
						return this.change_goods_info(res);
					}
				});
			},
			change_goods_info(res){
				this.goodsInfo.goods_price = res.goods_price;
				this.goodsInfo.goods_market_price = res.goods_market_price;
				this.goodsInfo.goods_stock = res.goods_stock;
			},
			stopPrevent(){},
			onClick (e) {
				console.log(e)
				if(e.index==0){
					return this.$nav('/pages/chat/index?id='+this.goodsInfo.store_id)
				}
				if(e.index==1){
					return this.$nav('/pages/store/index?id='+this.goodsInfo.store_id)
				}
				if(e.index==2){
					return this.$nav('/pages/index/cart',1)
				}
			},
			buttonClick (e) {
				if(!this.collectives){
					if(e.index == 0){
						this.buyButton = 0
					}else{
						this.buyButton = 1
					}
				}else{
					if(e.index == 0){
						this.buyButton = 1
					}else{
						this.collective_id=-1;
						this.buyButton = 1
					}
				}
			
				this.toggleSpec();
				// this.$nav('/pagesUser/order/create')
				
			},
			choseCom(){
				this.toggleSpec();
				if(this.buyButton == 0){
					this.add_cart()
				}else{
					this.buy();
				}
			},
			// 立即购买
			buy(){
				let params = {
					order:[
						{
							goods_id:this.goodsInfo.id, // 商品ID
							sku_id:this.sku_id, // SKUid 没有则为0
							buy_num:this.buy_num, // 购买数量
							collective_id:this.collective_id, // 拼团ID 非必传
						},
					],
					ifcart:0, // 是否购物车
				};
	
				// 恢复 collective_id
				this.collective_id = 0
				
				let baseObj = JSON.stringify(params);
				var b = new Buffer(baseObj);
				var basecode = b.toString('base64');
				
				this.$nav('/pagesUser/order/create?params='+basecode)
			},
			// 加入购物车
			add_cart(){
				let params = {
					goods_id:this.goodsInfo.id, // 商品ID
					sku_id:this.sku_id, // SKUid 没有则为0
					buy_num:this.buy_num, // 购买数量
				};
				this.$http(this.$api.cartAdd,params).then(res=>{
					this.cart_count();
					this.$toast(res.msg);
					uni.$emit('carts')
				})
				// this.$get(this.$api.homeCarts).then(res=>{
				//     this.$returnInfo(res);
				// })
			},
			cart_count(){
				this.$http(this.$api.cartCount).then(res=> {
					if(res.code == 200){
						this.options[2].info = res.data;
					}
				});
			},
			toggleSpec(){
				if(this.specClass === 'show'){
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				}else if(this.specClass === 'none'){
					this.specClass = 'show';
				}
			},
			coupons_receive(id){
				let obj = {...this.$api.coupons}
				obj.url += '/receive'
				obj.method = 'post'
				this.$http(obj,{id:id}).then(res=>{
					return this.$toast(res.msg)
				})
			},
			//显示优惠券面板
			toggleMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			is_fav(){
				let obj = {...this.$api.favs}
				obj.url += '/'+this.goods_id+'?is_type=0'
				this.$http(obj).then(res=>{
					if(res.code==200){
						this.isFav = true
					}else{
						this.isFav = false
					}
				})
			},
			favClick(){
				let obj = {...this.$api.favs}
				obj.method = 'post';
				this.$http(obj,{id:this.goods_id,is_type:0}).then(res=>{
					this.$toast(res.msg)
					this.is_fav();
				})
			},
			share(){
				this.$refs.popup.open()
			},
			select(e){
				let type = 'WXSceneSession';
				if(e.index=0){
					type = 'WXSceneSession'
				}
				if(e.index=1){
					type = 'WXSenceTimeline'
				}
				if(e.index=2){
					type = 'WXSceneFavorite'
				}
				uni.share({
				    provider: "weixin",
				    scene: type,
				    type: 0,
					title:this.goodsInfo.goods_name||'商品',
					imageUrl:this.goodsInfo.goods_images_thumb_150[0]||'',
				    summary: "优惠不断，等你来拿！",
				    success: function (res) {
						this.$toast('分享成功');
				        console.log("success:" + JSON.stringify(res));
				    },
				    fail: function (err) {
				        console.log("fail:" + JSON.stringify(err));
				    }
				});
				// console.log(e,e.index)
			},
		},
	}
</script>

<style lang="scss">
.goods_info_page{
	.tuan_list{
		margin-top: 20rpx;
		.tuan_item{
			padding: 20rpx;
			&:after{
				content:'';
				display: block;
				clear: both;
			}
			image{
				width: 50rpx;
				height: 50rpx;
				border:1px solid #efefef;
				border-radius: 50%;
				float: left;
				margin-right: 15rpx;
			}
			.nickname{
				color:#b5621b;
				font-size: $uni-font-size-sm;
				float: left;
				display: block;
				line-height: 50rpx;
			}
			.orders_count{
				color:#b5621b;
				float: right;
				display: block;
				line-height: 50rpx;
				margin-right: 20rpx;
				font-size: $uni-font-size-sm;
			}
			.btn{
				font-size: $uni-font-size-sm;
				cursor: pointer;
				display: block;
				background: #67c23a;
				color:#fff;
				border-radius: 6rpx;
				float: right;
				line-height: 50rpx;
				padding:0 30rpx;
			}
		}
	}
	.goods_nav{
		position: fixed;
		left: var(--window-left);
		right: var(--window-right);
		bottom: 0;
	}
	.comment{
		background: #fff;
		margin-top: 1px;
		.comment_content{
			display: flex;
			padding: 30rpx;
			.comment_info{
				flex: 1;
				font-size: $uni-font-size-base;
				.nickname{margin-bottom: 10rpx;}
				.desc{margin-bottom: 20rpx;color:#666}
				.img{margin-bottom: 20rpx;image{margin-right: 10rpx;background: #eee;width: 130rpx;height: 130rpx;border-radius: 10rpx;}}
				.other{color:#999;font-size: $uni-font-size-sm;}
			}
			.avatar{width: 90rpx;height:90rpx;background: #eee;border-radius: 50%;flex:0 0 90rpx;margin-right: 20rpx;image{width: 90rpx;height: 90rpx;}}
			&:after{
				content:'';clear: both;display: block;
			}
		}
	}
	.content{
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx 30rpx 160rpx 30rpx;
		.c_title{text-align: center;border-bottom: 1px solid #f1f1f1;padding-bottom: 30rpx;margin-bottom: 30rpx;}
	}
	.info_attr{margin-top: 20rpx;.yhq{font-size: 28rpx;color:$uni-color-error;}.yhq2{font-size: 24rpx;color:$uni-color-error;}.yhqicon{color:#fff;background: #f85e52;font-size: 12rpx;border-radius: 4rpx;padding: 0 6rpx;margin-right: 10rpx;} }
	.goods_title{background: #fff;padding: 30rpx;
		.stock_num{display: flex;margin-top: 30rpx;.sale{font-size: $uni-font-size-sm;color:#aaa;flex:1;}}
		.goods_name{font-weight: bold;margin-bottom: 10rpx;line-height: 55rpx;}
		.goods_desc{font-size: $uni-font-size-base;color:#aaa}
		.goods_price{
			margin-top: 20rpx;
			.price{color:$uni-color-error;font-size: 40rpx;}
			.market_price{color:#aaa;font-size:$uni-font-size-base;text-decoration: line-through;margin-left: 10rpx;}
			.tip{background: $uni-color-error;color:#fff;border-radius: 10rpx;margin-left: 30rpx;padding: 0 15rpx;font-size: $uni-font-size-sm;}
		}
	}
	.swiper-item{text-align: center;}
	.goods_images{
		position: relative;
		image{
			width: 100%;
			height: 700rpx;
		}
		.left_icon{
			position: absolute;background: rgba(#000, 0.4);border-radius: 50%;width: 60rpx;height: 60rpx;text-align: center;box-sizing: border-box;
			padding-top: 8rpx;
			left:40rpx;top:calc(var(--status-bar-height) + 40rpx);
		}
		.right_icon{
			position: absolute;background: rgba(#000, 0.4);border-radius: 50%;width: 60rpx;height: 60rpx;text-align: center;box-sizing: border-box;
			padding-top: 6rpx;
			color:#fff;
			right:40rpx;top:calc(var(--status-bar-height) + 40rpx);
			&.sec{
				width: 130rpx;
				border-radius: 40rpx;
				font-size: $uni-font-size-base;
				line-height: 48rpx;
				right: 140rpx;
				&.ck{
					background: $uni-color-error;
					color:#fff;
				}
			}
		}
	}
	
	/* 规格选择弹窗 */
	.attr-content{
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		.a-t{
			display: flex;
			image{
				width: 170rpx;
				height: 170rpx;
				flex-shrink: 0;
				margin-top: -40rpx;
				border-radius: 8rpx;;
			}
			.right{
				display: flex;
				flex-direction: column;
				padding-left: 24rpx;
				font-size: $uni-font-size-sm + 2rpx;
				color: #606266;
				line-height: 42rpx;
				.price{
					font-size: $uni-font-size-lg;
					color: $uni-color-error;
					margin-bottom: 10rpx;
				}
				.selected-text{
					margin-right: 10rpx;
				}
			}
		}
		.attr-list{
			display: flex;
			flex-direction: column;
			font-size: 30rpx;
			color: #606266;
			padding-top: 30rpx;
			padding-left: 10rpx;
		}
		.item-list{
			padding: 20rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			text{
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				min-width: 60rpx;
				height: 50rpx;
				padding: 0 20rpx;
				font-size: $uni-font-size-sm;
				color: #333;
			}
			.selected{
				background: $uni-color-error;
				color: #fff;
			}
		}
	}
	/* 优惠券面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 5;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}
	/* 优惠券列表 */
	.coupon-item{
		display: flex;
		flex-direction: column;
		margin: 20rpx 24rpx;
		background: #fff;
		.con{
			display: flex;
			align-items: center;
			position: relative;
			height: 120rpx;
			padding: 0 30rpx;
			&:after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100rpx;
		}
		.title{
			font-size: 32rpx;
			color: #333;
			margin-bottom: 10rpx;
		}
		.time{
			font-size: 24rpx;
			color: #999;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26rpx;
			height: 100rpx;
		}
		.price{
			color:$uni-color-error;
			font-size: 44rpx;
			&:before{
				content: '￥';
				font-size: 34rpx;
			}
		}
		.tips{
			font-size: 24rpx;
			line-height: 60rpx;
			padding-left: 30rpx;
		}
		.circle{
			position: absolute;
			left: -6rpx;
			bottom: -10rpx;
			z-index: 10;
			width: 20rpx;
			height: 20rpx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r{
				left: auto;
				right: -6rpx;
			}
		}
	}
	
	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}
		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40rpx;
			border-radius: 10rpx 10rpx 0 0;
			background-color: #fff;
			.btn{
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 12rpx;
				background: $uni-color-error;
				font-size: 28rpx + 2rpx;
				color: #fff;
				margin: 30rpx auto 20rpx;
			}
		}
		@keyframes showPopup {
			0% {
				opacity: 0;
			}
			100% {
				opacity: 1;
			}
		}
		@keyframes hidePopup {
			0% {
				opacity: 1;
			}
			100% {
				opacity: 0;
			}
		}
		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}
			100% {
				transform: translateY(0%);
			}
		}
		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(120%);
			}
		}
	}
}
</style>
